<template>
  <div>
    <div class="banner">
    </div>

    <el-main>
      <div class="container" id="team" name="team">
          <br>
          <div class="centered">
              <h1 class="centered">我们的团队</h1>
              <hr>
              <br>
              <br>
            <el-row>
              <el-col :span='6' v-for="item in teamMenbers" :key="item.id">
                <div class="centered">
                    <img class="img img-circle" src="images/team/team.png" height="120px" width="120px" alt="">
                    <br>
                    <h4><b>{{item.name}}</b></h4>
                    <i class="el-icon-phone-outline"></i>
                    <i class="el-icon-location-outline"></i>
                    <p>{{item.description}}</p>
                </div>
              </el-col>
            </el-row>
          </div>
      </div>
    </el-main>

    <el-main id="greywrap">
      <div>
        <div class="container">
          <el-row>
            <el-col :span='8' v-for="item in features" :key="item.id">
              <h2>{{item.title}}</h2>
              <p>{{item.description}}</p>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-main>

    <el-main>
      <div class="container" id="team" name="team">
        <br>
        <div class="centered">
            <h1 class="centered">产品特点</h1>
            <hr>
            <br>
            <br>
        </div>
        <el-row>
          <el-col :span='12'>{{lorem}}</el-col>
          <el-col :span='12'>{{lorem}}</el-col>
        </el-row>
      </div>
    </el-main>
  </div>
</template>

<script>
export default {
  data(){
    return{
      lorem:'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente, harum cumque. Quaerat perspiciatis perferendis quam consequuntur possimus, cum beatae et sit nemo cumque ad vero, non placeat accusantium aperiam. Laboriosam',
      teamMenbers:[
        {
          name:'NAME',
          description:'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas vel deleniti praesentium doloremque commodi, amet doloribus debitis est harum voluptatem?',
          id:0
        },
                {
          name:'NAME',
          description:'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas vel deleniti praesentium doloremque commodi, amet doloribus debitis est harum voluptatem?',
          id:1
        },
                {
          name:'NAME',
          description:'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas vel deleniti praesentium doloremque commodi, amet doloribus debitis est harum voluptatem?',
          id:2
        },
                {
          name:'NAME',
          description:'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas vel deleniti praesentium doloremque commodi, amet doloribus debitis est harum voluptatem?',
          id:3
        }
      ],
      features:[
        {
          title:'产品特点',
          description:'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas vel deleniti praesentium doloremque commodi, amet doloribus debitis est harum voluptatem?',
          id:0
        },
        {
          title:'产品特点',
          description:'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas vel deleniti praesentium doloremque commodi, amet doloribus debitis est harum voluptatem?',
          id:1
        },
        {
          title:'产品特点',
          description:'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas vel deleniti praesentium doloremque commodi, amet doloribus debitis est harum voluptatem?',
          id:2
        },
      ]
    }
  }
}
</script>

<style scoped>
  .banner{
    margin: 0%;
    padding: 0%;
    height: 100vh;
    background: url("../../static/bg.jpg") no-repeat;
    background-size: 100%;
    position: relative;
    top: 60px;
  }
  .logan{
    font-size: 6em;
  }
  .container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
.centered {
    text-align: center;
}
hr {
    position: relative;
    border: none;
}
hr {
    display: block;
    height: 1px;
    border: 0;
    /* border-top: 1px solid #ccc; */
    margin: 1em 0;
    padding: 0;
}
hr:before {
    content: " ";
    position: absolute;
    top: 0;
    left: 25%;
    width: 50%;
    height: 2px;
    background: #ccc;
}
#greywrap {
    background: #f5f5f5;
    margin-top: 0px;
    padding-top: 40px;
    border-bottom: 1px solid #ddd;
    text-align: center;
}
</style>
